<template>
    <view class="scroll-digit" :style="[wrapStyle]">
        <view class="scroll-digit__col" :style="[scrollDigitColStyle]" v-for="(column, index) in columns" :key="index">
            <view class="scroll-digit__column" :style="[scrollDigitColumnStyle,{transform:`translate3d(0, -${keys[index] * height}px, 0)`}]">
                <view class="scroll-digit__item" :style="[scrollDigitItemStyle]" v-for="(digit,digitIndex) in column" :key="digitIndex">{{digit}}</view>
            </view>
        </view>
    </view>
</template>

<script>
// 数字滚动组件
import mixins from '@/mixins/components.js';
export default {
    name: 'ScrollDigit',
    mixins: [mixins],
    props: {
        value: {
            type: [Number, String],
            default: ''
        },
        // 文字颜色
        color: {
            type: String,
            default: '#333333'
        },
        // 文字大小
        size: {
            type: [Number, String],
            default: 32
        },
        // 是否粗体
        bold: {
            type: Boolean,
            default: false
        },
        //滚动行高度 rpx
        cellHeight: {
            type: [Number, String],
            default: 32
        },
        //单个数字宽度 rpx
        cellWidth: {
            type: [Number, String],
            default: 'auto'
        },
        // 动画过渡效果
        animation: {
            type: String,
            default: 'cubic-bezier(0, 1, 0, 1)'
        },
        //动画时间
        duration: {
            type: Number,
            default: 1.2
        }
    },
    data() {
        return {
            columns: [], // 数字拆分的每一项
            keys: [],
            height: 0
        };
    },
    watch: {
        value(val) {
            this.initColumn(this.value);
        },
        cellHeight(val) {
            this.handleHeight(val);
        }
    },
    created() {
        this.handleHeight(this.cellHeight);
        this.initColumn(this.value);
    },
    computed:{
      scrollDigitColStyle(){
          const style = {};
          const { cellWidth,cellHeight } = this;
          style.width = cellWidth == 'auto'? cellWidth:this.transRpx(cellWidth);
          style.height = this.transRpx(cellHeight);
          return style;
      },
      scrollDigitColumnStyle(){
          const style = {};
          const { animation,duration } = this;
          style.transitionDuration = duration + 's';
          style.transitionTimingFunction = animation;
          return style;
      },
      scrollDigitItemStyle(){
          const style = {};
          const { color,size,height,bold } = this;
          style.color = color;
          style.height = height + 'px';
          style.fontSize = this.transRpx(size);
          style.lineHeight = this.transRpx(size);
          style.fontWeight = bold?'bold':'normal';
          return style;
      }
    },
    methods: {
        handleHeight(h) {
            this.height = uni.upx2px(h || 0);
        },
        initColumn(val) {
            val = val + '';
            let digit = val.length,
                arr = [],
                rows = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
            for (let i = 0; i < digit; i++) {
                if (val[i] === '.' || val[i] === ',') {
                    arr.push(val[i]);
                } else {
                    arr.push(rows);
                }
            }
            this.columns = arr;
            this.roll(val);
        },
        roll(value) {
            let valueArr = value.toString().split(''),
                lengths = this.columns.length,
                indexs = [];

            while (valueArr.length) {
                let figure = valueArr.pop();
                if (figure === '.' || figure === ',') {
                    indexs.unshift(0);
                } else {
                    indexs.unshift(Number(figure));
                }
            }
            while (indexs.length < lengths) {
                indexs.unshift(0);
            }
            this.keys = indexs;
        },
        // 数字转换rpx
        transRpx(val) {
            return /[rpx]/.test(val) ? val : `${val}rpx`;
        }
    }
};
</script>

<style scoped lang="scss">
.scroll-digit {
    display: flex;
    align-items: center;
    .scroll-digit__col{
        overflow: hidden;
        .scroll-digit__column {
        	display: flex;
        	align-items: center;
        	flex-direction: column;
        	justify-content: center;
        	transform: translate3d(0, 0, 0);
            .scroll-digit__item {
            	display: flex;
            	align-items: center;
            	justify-content: center;
            }
        }
    }
}
</style>
